<template>
  <div>
     <el-button type="primary" @click="savePermission()">分配权限</el-button>
    <el-tree
      :data="permissionList"
      show-checkbox
      check-strictly=true
      node-key="id"
       ref="tree"
      :default-expanded-keys="[2, 3]"
      :default-checked-keys="defaultChecked"
      :props="defaultProps"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      roleId: 0,
      permissionList: [],
      defaultChecked:[],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
   loadPermission(){
     this.roleId = this.$route.query.roleId;
     this.$axios.get("permissions/"+this.roleId)
    .then(res=>{
        this.permissionList = res.data.data.permissionList;
        this.defaultChecked = res.data.data.defaultChecked;
    })
   },
   savePermission(){    
    this.$axios.post("/permissions",{
        roleId:this.roleId,
        perIds:this.$refs.tree.getCheckedKeys()
    }).then(res=>{
        this.$message.success("权限分配成功")
    })
   }
  },
  mounted() {
   this.loadPermission()
  },
};
</script>